<!DOCTYPE HTML>
<html>
 <head>
  <title> 表单中的表格</title>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.css" />
   <link rel="stylesheet" href="/static/plugins/simditor/styles/simditor.css">
   <style type="text/css">
   	body{
   		/*background:#EFF3FC ;*/
   	}
   	html,body,.content, #dictoryClassify {
   		height: 100%;
   	}
   	ul,li{
   		list-style: none;
   		padding: 0px;
   	}
    .content{
	    margin-left: 0;
	    margin-top: 0;
	    width: auto;
	    padding: 0px 20px 0 20px;
    }
    #myTabContent{
      display: flex;
      text-align:center;
    }
    a{
      color:#000;
    }
    a:hover{
      text-decoration: none;
      cursor:pointer;
    }
    .left-nav{
      border:1px solid #bbb;
      width:10%;
      min-width:100px;
    }
    .right-show{
      flex-grow: 1;
      text-align: left;
      border:1px solid #bbb;
      margin-left:20px;
    }
    .left-nav .title,.right-show .title{
      border-bottom:1px solid #bbb;
      height:50px;
      line-height:50px;
    }
    .left-nav .title a{
      cursor:pointer;
    }
    .left-nav .nav-list li{
      padding:10px;
    }
    .left-nav .nav-list li a{
      padding:10px;
    }
    .right-show .title{
      padding:0 10px;
    }
    .right-show .title a{
      padding:10px 20px;
      background-color:#ddd;
    }
    .right-show .title a:hover,.right-show .title a.active{
      background-color:#45CEF6;
    }
    .simditor-show{
      padding:20px 30px;
    }
    .title-input{
      font-size:18px;
      margin:10px;
    }
    .simditor-show>div>input{
      width:50%;
    }
    #words{
      margin-left:20px;
      color:#f00;
    }
    .simditor-show{
      display:none;
    }
   </style>
 </head>
 <body>
  <div class="content">
     <div style="padding: 10px 0;">系统管理>帮助中心</div>
    <div id="myTabContent" class="tab-content">
        <div class="left-nav">
          <div class="title">帮助中心<a src="" onclcik="refreshNav()">刷新</a></div>
          <ul class="nav-list">
            <li><a>常见问题</a></li>
            <li><a>登陆</a></li>
          </ul>
        </div>
        <div class="right-show">
          <div class="title">
            <a  type="button" onclick="addHelpItem()">添加</a>
            <a  type="button">编辑</a>
            <a  type="button">删除</a>
          </div>
          <div class="simditor-show">
              <div class="simditor-content">
                  <label for="" class="title-input">标题</label>
                  <input type="text" autocomplete="off" id="accepted_answer" placeholder="请输入标题，长度12字以内"><a id="words">0</a>/12
              </div>
              <textarea id="editor" hidden="true" autofocus></textarea>
              <a  type="button" class="btn btn-success" style="margin-top:7px;">保存</a>
          </div>
        </div>
    </div>
  </div>
  <script type="text/javascript" src="/static/assets/js/jquery.min.js"></script>
  <script type="text/javascript" src="/static/bootstrap/js/bootstrap.min.js" ></script>
  <script type="text/javascript" src="/static/assets/js/prettify.js"></script>
  <script src="/static/plugins/simditor/scripts/module.js"></script>
  <script src="/static/plugins/simditor/scripts/hotkeys.js"></script>
  <script src="/static/plugins/simditor/scripts/uploader.js"></script>
  <script src="/static/plugins/simditor/scripts/simditor.js"></script>
  <script src="/static/plugins/simditor/scripts/simditor-dropzone.js"></script>
  <script type="text/javascript">
  //富文本编辑器
  //设置工具栏
   toolbar = ['title', 'bold', 'italic','underline', 'strikethrough','color','|', 'ol', 'ul', 'blockquote', 'code', 'table', '|',
              'link','image', 'hr', '|', 'indent', 'outdent'];
  //初始化
    var editor = new Simditor({
        textarea: $('#editor'),
        placeholder: '这里输入内容...',
        toolbar:toolbar, 
        pasteImage: true,//允许粘贴图片
        defaultImage : '../simditor/images/image.png',
        upload:{
            url:  '/smiditor/uploadSimditorImg',//文件上传的接口地址 
            params: null,//键值对,指定文件上传接口的额外参数,上传的时候随文件一起提交 
            fileKey: 'fileDataFileName',//服务器端获取文件数据的参数名 
            connectionCount: 3,
            leaveConfirm: '正在上传文件,离开该页面会停止上传，确定要离开么？'
          }

    });
    function addHelpItem(){
      console.log(1111)
        $(".simditor-show").css('display',"block");
    }
    //输入框实时检测输入字符个数并且到了规定的字数禁止输入
     $("#accepted_answer").keyup(function(){
        var len = $(this).val().length;
        if(len > 12){
            $(this).val($(this).val().substring(0,12));
            $("#word").text(0);
        }
        if(len > 12){
          len = 12;
        }
        $("#words").html(len);
     });

  </script> 
<body>
</html> 